<template>
    <div class="fullPage" >
        <div class="pageHeader">
            <div class="title">
                <i :class="ui.title.icon"></i> <span>{{ui.title.text}}</span>
            </div>
            <div class="filter"></div>
            <div class="acs">
                <ul class="lstAcs">
                    <li><el-button type = "text" @click="refresh"><i class="fa fa-refresh"></i> refresh</el-button></li>
                    <li><el-button type = "text" @click="showDlg(null)"><i class="fa fa-plus"></i> create new</el-button></li>
                </ul>
            </div>
        </div>
        <div class="pageBody">
            <el-table
                :data="rowDatas"
                style="width: 100%"
                :height="ui.tabHeight"
            >
                <el-table-column
                    v-for = "(col, colIndex) in ui.tabCols"
                    :key="colIndex"       
                    :prop="col.pro"             
                    :label="col.lab"
                    :width="col.width"
                ></el-table-column>
                <el-table-column     
                    prop="localLongValue"             
                    label="LocalLongValue"
                    width=""
                ></el-table-column>
                <el-table-column
                    fixed="right"
                    label="Action"
                    width="160">
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="showDlg(scope.row)"
                        type="text"
                        size="small">
                        <i class="fa fa-edit"></i> edit
                        </el-button>
                        <el-button
                        @click.native.prevent="deleteRow(scope.row)"
                        type="text"
                        size="small">
                        <i class="fa fa-close"></i> remove
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            :title="ui.title.text"
            :visible.sync="editDlg.show"
            width="700px"
            >
            
                <div class="formEditPan">
                    <div class="editRow">
                        <div class="lab">order</div>
                        <div class="edit">
                            <el-input v-model="editDlg.editInfo.order"></el-input>
                        </div>
                    </div>  
                    <div class="editRow">
                        <div class="lab">class</div>
                        <div class="edit">
                            <el-input v-model="editDlg.editInfo.class"></el-input>
                        </div>
                    </div> 
                    <div class="editRow">
                        <div class="lab">code</div>
                        <div class="edit">
                            <el-input v-model="editDlg.editInfo.code"></el-input>
                        </div>
                    </div> 
                    <div class="editRow">
                        <div class="lab">value</div>
                        <div class="edit">
                            <el-input v-model="editDlg.editInfo.value"></el-input>
                        </div>
                    </div> 
                    <div class="editRow">
                        <div class="lab">localValue</div>
                        <div class="edit">
                            <el-input v-model="editDlg.editInfo.localValue"></el-input>
                        </div>
                    </div> 
                    <div class="editRow">
                        <div class="lab">longValue</div>
                        <div class="edit">
                            <el-input v-model="editDlg.editInfo.longValue"></el-input>
                        </div>
                    </div> 
                    <div class="editRow">
                        <div class="lab">localLongValue</div>
                        <div class="edit">
                            <el-input v-model="editDlg.editInfo.localLongValue"></el-input>
                        </div>
                    </div> 
                </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editDlg.show = false" type = "warning" style="float:left"><i class="fa fa-reply"></i> Cancel</el-button>
                <el-button type="primary" @click="save"><i class="fa fa-save"></i> OK</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        mounted() {
            var me = this;
            try{
                me.init();
            } catch(er){
                console.log(er);
            }
        },
        data() {
            return { 
                sqls:{
                    getItems:"squ/baseData/commonCode/getItems" ,
                    newItem:"squ/baseData/commonCode/create",
                    deleteItem:"squ/baseData/commonCode/delete",
                    editItem:"squ/baseData/commonCode/edit"
                },
                ui:{
                    title:{
                        text:"Common Code / 公共代码" ,
                        icon:"fa fa-file-code-o subIcon"
                    },
                    tabHeight:200,
                    tabCols:[
                        {pro:"order" , lab:"Order" , width:60} ,
                        {pro:"commonCodeId" , lab:"ID" , width:60} ,
                        {pro:"class" , lab:"Class" , width:160} ,
                        {pro:"code" , lab:"Code" , width:100} ,
                        {pro:"value" , lab:"Value" , width:260} ,
                        {pro:"localValue" , lab:"LocalValue" , width:240} ,
                        {pro:"longValue" , lab:"LongValue" , width:260}  
                    ]
                    
                },
                rowDatas:[],
                editDlg:{
                    show:false,
                    index:0,
                    editInfo:{
                        class:"" , 
                        code:"" , 
                        localLongValue:"" , 
                        localValue:"" , 
                        longValue:"" , 
                        order:0 , 
                        value:"" , 
                        commonCodeId :0
                    }
                }
            };
        },
        methods: {
            init() {
                var me = this;
                try{
                    me.$nextTick().then(_=>{
                        var h = (document.getElementsByClassName('pageBody')[0]).offsetHeight;
                        me.ui.tabHeight = h;
                        me.refresh();
                    });
                } catch(er){
                    console.log(er);
                }
            },
            refresh() {
                var me = this;
                return new Promise( (success , faild )=>{
                    try{
                        me.editDlg.show = false;
                        var key = me.sqls.getItems;
                        var ps = {};                            
                        me.sys.query(key, ps).then(res=>{
                            me.rowDatas = res;
                            success();
                        })
                    } catch(er){
                        console.log(er);
                        success();
                    }
                })
            },
            showDlg( dataRow ) {
                var me = this;
                try{ 
                    if (dataRow  && dataRow!=null){
                        me.editDlg.editInfo = dataRow
                    }
                    else{
                        me.editDlg.editInfo = {
                            class:"" , 
                            code:"" , 
                            localLongValue:"" , 
                            localValue:"" , 
                            longValue:"" , 
                            order:0 , 
                            value:"" , 
                            commonCodeId :0
                        };
                    }
                    me.editDlg.show = true;
                } catch(er){
                    console.log(er);
                }
            },
            save() {
                var me = this;
                try{ 
                    var key = me.editDlg.editInfo.commonCodeId && me.editDlg.editInfo.commonCodeId>0?me.sqls.editItem: me.sqls.newItem;
                    var ps = me.editDlg.editInfo;                           
                    me.sys.query(key, ps).then(res=>{
                        if (res.rowcount>0) {
                            me.$message({
                                message: 'save action success.',
                                type: 'success'
                            });
                            me.editDlg.show = false;
                            me.refresh();
                        }
                        else{
                            me.$message.error('save action faild!');
                        }
                    })


                } catch(er){
                    console.log(er);
                }
            },
            deleteRow(row) {
                var me = this;
                try{ 
                    me.$confirm('此操作将永久删除该公共代码, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var ps ={
                            commonCodeId: row.commonCodeId
                        }
                        me.sys.query(me.sqls.deleteItem , ps).then(res=>{
                            if (res.rowcount>0) {
                                me.$message({
                                    message: 'delete action success.',
                                    type: 'success'
                                });
                                me.refresh();
                            }
                            else{
                                me.$message.error('delete  action faild!');
                            }
                        });
                    })
                } catch(er){
                    console.log(er);
                }
            },
        },
        
        
    }
</script>

<style lang="less" scoped>
    @import url('../module.less');

</style>